<div class="col w-100 p-0">
<div class="col-4 p-3 d-flex justify-content-center" id="sidebar">
    <div class="pt-3 col-10">
        <div class="bg-light shadow-sm p-3 d-flex mb-3 align-items-center">
            {% if record_status == 1 %}
                <div class="p-2 bg-danger mr-2" style="border-radius: 20px 20px 20px 20px;"></div>
                <h5 class="m-0">正在录制</h5>
            {% elif record_status == 2 %}
                <div class="p-2 bg-success mr-2" style="border-radius: 20px 20px 20px 20px;"></div>
                <h5 class="m-0">正在监听</h5>
            {% else %}
                <div class="p-2 bg-warning mr-2" style="border-radius: 20px 20px 20px 20px;"></div>
                <h5 class="m-0">暂停</h5>
            {% endif %}
        </div>
        <div class="bg-light shadow-sm p-3 d-flex justify-content-center align-items-start flex-column">
            <div class="col alert {% if status == 1 %}alert-primary{% elif status == 0 %}alert-danger{% endif %}" role="alert">
                房间:
                <div class="col d-flex justify-content-center">
                    <h3>{{ room_id }}</h3>
                </div>
            </div>

            <!-- UID -->
            <div class="col d-flex p-0 align-items-center">
                <label class="col-3 m-0">UID</label>
                <div class="col-9">{{ UID }}</div>
            </div>

            <div class="col dropdown-divider"></div>

            <div class="col">
                <ul class="nav flex-column nav-pills" role="tablist" aria-orientation="vertical">
                   <li class="nav-item">
                       <button class="col btn active nav-link btn-light d-flex justify-content-start align-items-center p-1"
                               id="torecordpage"
                               data-toggle="pill"
                               href="#recordpage"
                               role="tab"
                               aria-controls="torecordpage"
                               aria-selected="true">
                           <i class="iconfont icon-luxiang text-secondary mr-2" style="font-size: 1.1rem"></i>
                           录制
                       </button>
                   </li>
                   <li class="nav-item">
                       <button class="col btn nav-link btn-light d-flex justify-content-start align-items-center p-1"
                               id="tosettingpage"
                               data-toggle="pill"
                               href="#settingpage"
                               role="tab"
                               aria-controls="settingpage"
                               aria-selected="false">
                           <i class="iconfont icon-shezhi text-secondary mr-2" style="font-size: 1.2rem"></i>
                           设置
                       </button>
                   </li>
                </ul>
            </div>

            <div class="col dropdown-divider"></div>

            <div class="btn-group col" role="group" aria-label="Basic example">
                <button type="button" class="btn btn-outline-dark" onclick="RecordRestart()">
                    <i class="iconfont icon-zhongqi"></i>
                </button>
                <button type="button" class="btn btn-outline-dark" onclick="{% if record_status == 0 %}RecordStart(){% elif record_status == 1 %}RecordStop(){% endif %}">
                    <i class="iconfont {% if record_status == 0 %}icon-qidong{% else %}icon-zantingtingzhi{% endif %}"></i>
                </button>
            </div>
        </div>
    </div>
</div>
<div class="col d-flex justify-content-end">
<div class="col-8 m-3 p-3 tab-content" id="Content">
<div id="recordpage" class="tab-pane fade show active" role="tabpanel" aria-labelledby="torecordpage">
    <div class="col-11 bg-light shadow-sm p-3">
        <h3 class="pt-3 pl-3 pr-3 pb-0">Record</h3>
        <small class="p-3">已录制 {{ records }}</small>
    </div>
    <div class="col-11 p-0 mt-3">
        <form class="d-flex mb-2" method="get" action="/">
            <input class="form-control col" type="date" name="date" />
            <div class="btn-group ml-2 bg-light" role="group" aria-label="Basic example">
                <button type="submit" class="btn btn-outline-dark">查询</button>
                <button type="reset" class="btn btn-outline-dark">重置</button>
            </div>
        </form>
    </div>
    <div class="col-11 bg-light shadow-sm p-0 mt-3">
        <ul class="list-group">
            {% for record in RecordList %}
                <button type="button"
                        class="list-group-item list-group-item-action d-flex justify-content-between"
                        data-toggle="modal"
                        data-target="#recordinfo"
                        onclick="getInfo('{{ record.id }}', '{{ record.Cover }}', '{{ record.Title }}', '{{ record.Date }}', '{{ record.Time }}', '{{ record.Resolution }}', {{ record.FrameRate }}, {{ record.VideoByteRate }}, {{ record.AudioByteRate }})">
                    <div>{{ record.Title }}</div>
                    <div>{{ record.Date }}</div>
                </button>
            {% endfor %}
        </ul>
    </div>
</div>
<div id="settingpage" class="tab-pane fade" role="tabpanel" aria-labelledby="tosettingpage">
    <div class="bg-light d-flex shadow-sm p-3 mb-3">
        <h3 class="col p-3">Settings</h3>
    </div>
    <div class="bg-light d-flex flex-column shadow-sm p-3">
        <div class="col-5">
        <div class="form-group">
            <label for="listenroomid">房间号</label>
            <input type="text" class="form-control" id="listenroomid" placeholder="{{ room_id }}">
        </div>
        <div class="form-group">
            <label for="listenUID">主播UID</label>
            <input type="text" class="form-control" id="listenUID" placeholder="{{ UID }}">
        </div>
        <div class="form-group">
            <label for="savepath">存储路径</label>
            <input type="text" class="form-control" id="savepath" placeholder="{{ savepath }}">
        </div>
        <button type="button"
                class="btn btn-primary"
                onclick="changeSettings('{{ records }}', '{{ status }}', '{{ record_status }}')">
            保存</button>
        </div>
    </div>
</div>
</div>
</div>
</div>
<!-- Model -->
<div class="modal fade"
     id="recordinfo"
     data-keyboard="false"
     tabindex="-1"
     role="dialog"
     aria-labelledby="staticBackdropLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">录制信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="col d-flex flex-column">
                    <img src="" id="info_cover" onerror="javascript:this.src='/static/image/Cover/Default.png';" class="img-fluid" />
                    <h4 id="info_title" class="mt-3 mb-3"></h4>
                </div>
                <div class="col">
                    <table class="table table-striped">
                        <thead class="thead-dark">
                            <th>分辨率</th>
                            <th>帧速率</th>
                            <th>视频比特率</th>
                            <th>音频比特率</th>
                        </thead>
                        <tbody>
                        <tr>
                            <td id="info_resolution"></td>
                            <td id="info_framerate"></td>
                            <td id="info_videobyterate"></td>
                            <td id="info_audiobyterate"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
